<template>
  <div class="w">
    <h3>我的订单</h3>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部订单" name="-1"></el-tab-pane>
          <el-tab-pane label="待入住订单" name="4"></el-tab-pane>
          <el-tab-pane label="待付款订单" name="1"></el-tab-pane>
          <el-tab-pane label="已完成订单" name="7"></el-tab-pane>
          <div style="background-color:#dbd1d1;">
            <el-table
                v-if="orderList.length > 0"
                :data="orderList" border ref="orderList" :fit="true" style="width: 100%">
              <el-table-column
                  fixed
                  prop="orderNo"
                  label="订单号"
                  width="160">
              </el-table-column>
              <el-table-column
                  label="订单状态"
                  width="100">
                <template slot-scope="scope">
                  <el-tag :type="orderStatue[scope.row.orderStatue].type">{{orderStatue[scope.row.orderStatue].statue}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                  prop="orderRealPrice"
                  label="付款金额"
                  width="120">
              </el-table-column>
              <el-table-column
                  label="创建时间"
                  width="170">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <span>付款时间：{{scope.row.orderFkTime}}</span><br>
                    <span>确认时间：{{scope.row.orderOkTime}}</span><br>
                    <span>取消时间：{{scope.row.orderCancerTime}}</span><br>
                    <span>自动确认时间：{{scope.row.orderAutoTime}}</span>
                    <div slot="reference" class="name-wrapper">
                      {{ scope.row.createTime}}
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                  label="订单备注"
                  width="250"
                  show-overflow-tooltip>
                <template slot-scope="scope">
                  {{scope.row.orderNote?scope.row.orderNote:'无'}}
                </template>
              </el-table-column>
              <el-table-column
                  label="订单评论"
                  width="240"
                  show-overflow-tooltip>
                <template slot-scope="scope">
                  {{scope.row.orderComment?scope.row.orderComment:'无'}}
                </template>
              </el-table-column>
              <af-table-column
                  fixed="right"
                  label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small" v-if="scope.row.orderStatue === 3" @click="editOrder(scope.row.id)">编辑</el-button>
                  <el-button type="text" size="small" v-if="scope.row.orderStatue === 6">评论</el-button>
                  <el-button type="text" size="small" v-if="scope.row.orderStatue === 7" @click="deleteOrder(scope.row.id)">删除</el-button>
                </template>
              </af-table-column>
            </el-table>
            <div class="page">
              <el-pagination
                  @size-change="orderPageSizeChange"
                  @current-change="orderPageCurrentChange"
                  :current-page="current"
                  :page-sizes="[5, 10, 20, 30, 999]"
                  :page-size="size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
              </el-pagination>
            </div>
          </div>
        </el-tabs>
      </div>
    </el-card>

    <el-dialog
        title="订单修改" :close-on-click-modal="false" :visible="showOrderCard"
        width="45%" :before-close="orderCardClose">
      <el-form ref="orderForm" :rules="orderRules" :model="order" label-width="auto">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名称" prop="orderName">
              <el-input v-model="order.orderName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户邮箱" prop="orderEmail">
              <el-input v-model="order.orderEmail"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="用户备注" prop="orderNote">
          <el-input v-model="order.orderNote"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户电话" prop="orderPhone">
              <el-input v-model="order.orderPhone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付金额" prop="orderRealPrice">
              <el-input v-model="order.orderRealPrice" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="orderCardClose">取 消</el-button>
        <el-button type="primary" @click="okEditOrder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Footer from "@/components/common/footer/Footer";
import {getAllCommonOrder, getOrderByOrderId, updateUserOrder} from "@/network/user";
import {deleteUserOrder} from "@/network/user";

export default {
  name: "Order",
  components: {Footer},
  data(){
    return{
      orderList:[],
      current:1,
      size:10,
      total:0,
      searchType:'',
      searchData:'',
      activeName: '-1',
      orderStatue: [
        {'statue':'已取消','type':'info'},
        {'statue':'待付款','type':'danger'},
        {'statue':'已付款','type':'success'},
        {'statue':'待确认','type':'warning'},
        {'statue':'已确认','type':'success'},
        {'statue':'已入住','type':'success'},
        {'statue':'待评论','type':'warning'},
        {'statue':'已完成','type':'info'},
        {'statue':'待退款','type':'danger'},
        {'statue':'已退款','type':'danger'},
        {'statue':'错误','type':'danger'},
      ],//订单状态
      userId: '',
      order:{},
      showOrderCard: false,
      orderRules:{
        orderName:[
          {required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        orderPhone:[
          { required: true, message: '请输入电话', trigger: 'blur' },
        ],
      },
    }
  },
  methods:{
    handleClick(tab, event) {
      if (tab.name==='-1'){
        this.getUserOrder(this.current,this.size,null,null)
      }else {
        this.getUserOrder(this.current,this.size,'order_statue',tab.name)
      }
    },
    //取消修改订单
    orderCardClose(){
      this.showOrderCard = false
      this.$refs.orderForm.clearValidate()
    },
    //编辑订单
    editOrder(orderId){
      getOrderByOrderId(orderId,this.userId).then(res=>{
        this.order = res.data.data
        this.showOrderCard = true
      })
    },
    //确认修改订单
    okEditOrder(){
      this.$refs.orderForm.validate(valid=>{
        if (valid){
          updateUserOrder(this.order,this.userId).then(res=>{
            this.$message.success('更新订单成功')
            this.getUserOrder(this.current,this.size,'','')
          })
          this.orderCardClose()
        }else {
          console.log('表单验证失败')
        }
      })
    },
    //删除订单
    deleteOrder(orderId){
      this.$confirm('删除订单不可逆！', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消删除',
        type: 'warning'
      }).then(() => {
        deleteUserOrder(orderId,this.userId).then(res=>{
          this.getUserOrder(this.current,this.size,'','')
          this.$message.success('删除成功')
        })
      }).catch(()=>{})
    },
    //每页数据条数改变
    orderPageSizeChange(val){
      this.size = val
      this.getUserOrder(this.current,this.size,'','')
    },
    //页数改变
    orderPageCurrentChange(val){
      this.current = val
      this.getUserOrder(this.current,this.size,'','')
    },
    getUserOrder(current,size,type,data){
      getAllCommonOrder(current,size,type,data,this.userId).then(res=>{
        this.orderList = res.data.data.records
        this.current = res.data.data.current
        this.total = res.data.data.total
        this.size = res.data.data.size
      })
    }
  },created() {
    this.userId = this.$store.getters.getUserInfo.id
    this.getUserOrder(this.current,this.size,this.searchType,this.searchData)
  }
}
</script>

<style scoped>
  .w {
  width: 1200px;
  margin: 0 auto;
  }
  a {
    text-decoration: none;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .clearfix a {
    padding-left: 30px;
    font-size: 16px;
    font-weight: 700;
    color: #333333;
  }
  .clearfix a:hover {
    color: #00a4ff;
  }
  .box-card {
    width: 100%;
    height: 100%;
  }
</style>